<!DOCTYPE html>
<html>

<head>
    <title>KDT</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <script src="/kdt.js"></script>
    <script src="/vue.js"></script>
    <script type="text/javascript">
    var mode = getCookie("KDT-Mode")
    var usid = getCookie('KDT-User-Sid')
    var asid = getCookie('KDT-Admin-Sid')
    if (usid == '' && asid == '') {
        location.href = '/userLogin.html'
    } else if (mode == 'Admin') {
        location.href = '/adminIndex.html'
    }

    function initialMe() {
        var userPage = document.getElementById('userPage')
        userPage.innerHTML = getCookie('KDT-User-Phone')

        var xhr = new XMLHttpRequest()
        xhr.onload = function(e) {
            if (this.status == 200 || this.status == 304) {
                var o = JSON.parse(xhr.responseText)
                if (o.State == "OK") {
                    window.app.Products = o.Ps
                } else {
                    alert(o.Info)
                }
            }
        }
        xhr.open('POST', '/apis/product/queryAll', true)
        xhr.send('')
    }
    setTimeout('initialMe()', 50)
    </script>
    <style type="text/css">
    .card {
        box-shadow: 1px 1px 1px #aaa;
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        padding: 5px;
    }

    img {
        height: 100px;
    }

    .updowncard {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }
    </style>
</head>

<body style="display: flex;flex-direction: column;align-items: center;margin: 0px;padding: 0px;">
    <div class="head" style="width: 100%;background-color: #FF6D00; box-shadow: 3px 3px 3px #aaa;display: flex;justify-content: space-between;padding: 5px;align-items: center;">
        <span style="margin-left: 8px;color: #fff;">淘宝商城</span>
        <span>
		<a href="/userPage.html" id="userPage"></a>
		<input type="button" value="注销" onclick="setCookie('KDT-User-Sid','',0);location.href='/'">
	</span>
    </div>
    <div id="product_container" style="display: flex;flex-direction: column;max-width: 500px;width: 100%; align-items: center;padding: 10px;">
        <div v-for="(p,pindex) in Products" style="width: 100%;">
        	<a v-bind:href='getLink(p.ProductId,pindex)' class="card">
            <img v-bind:src='getCover(pindex)'>
            <div class="updowncard">
                <font color="#aa0000" size="2">{{p.Price}}¥</font><b>{{p.Title}}</b><span style="color: #777">{{p.Intro}}</span></div>
            </a>
        </div>
    </div>
    <script type="text/javascript">
    window.app = new Vue({
        el: '#product_container',
        data: {
            Products: [],
            getCover: function(pindex) {
                return '/res/' + (pindex % 8 + 1).toString() + '.jpg'
            },
            getLink:function(pid,pindex) {
            	return '/product.html?productid='+pid+'&cover='+pindex.toString()
            }
        }
    })
    </script>
</body>

</html>